window.addEventListener('load', function () { 
    var focus = document.querySelector('.focus');
    var ul = document.querySelector('.focus ul');
    var lis = ul.querySelectorAll('li');
    var ol = document.querySelector('.focus ol');
    // console.log(ol);
    var index = 0;
    var flag = false;
    var focusWidth = focus.offsetWidth;
    var times = setInterval(function () { 
        index++;
        var translatex = -index * focusWidth;
        ul.style.transition = 'all 0.3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
    }, 2000)
    // 无缝滚动
    // transitionend是监听过渡完成事件
    ul.addEventListener('transitionend', function () {
        if (index >= 3) {
            index = 0;
            var translatex = -index * focusWidth;
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else if(index<0){ 
            index = 2;
            var translatex = -index * focusWidth;
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } 
        ol.querySelector('.current').classList.remove('current');
        ol.children[index].classList.add('current')

    })
    var startX = 0;
    var moveX = 0;
    ul.addEventListener('touchstart', function (e) { 
        startX = e.targetTouches[0].pageX;
        clearInterval(times)
    })
    ul.addEventListener('touchmove', function (e) { 
        moveX = e.targetTouches[0].pageX - startX;
        var translatex = -index * focusWidth +moveX;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translatex + 'px)'
        flag = true;
        e.preventDefault();
    })
    ul.addEventListener('touchend', function () { 
        // 判断移动的距离是否大于50，大于的话就滑动，否则回弹
        if (flag) { 
            flag = false
            if (Math.abs(moveX) > 50) {
                if (moveX > 0) {
                    index--;
                } else if (moveX < 0) {
                    index++;
                }
                var translatex = -index * focusWidth;
                ul.style.transition = 'all 0.3s';
                ul.style.transform = 'translateX(' + translatex + 'px)'
            } else { 
                var translatex = -index * focusWidth;
                ul.style.transition = 'all 0.3s';
                ul.style.transform = 'translateX(' + translatex + 'px)'
            }
        }
       
        clearInterval(times);
        times = setInterval(function () { 
            index++;
            var translatex = -index * focusWidth;
            ul.style.transition = 'all 0.3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000)
    })
    var goback = document.querySelector('.goBack');
    var local_nav = document.querySelector('.local-nav');
    window.addEventListener('scroll', function () { 
        if (window.pageYOffset >= local_nav.offsetTop) {
            goback.style.display = 'block';
        } else { 
            goback.style.display = 'none';

        }
    })
    goback.addEventListener('click', function () {
        window.scroll(0, 0);
    })
   
})